<template>
    <div class="assignment-header">
        <button class="back-button" @click="$router.go(-1)"><img src="@/assets/svgs/left.svg" alt="Back" /></button>
        <div class="information">教师签到界面</div>
        <div class="user-info" @click="toggleDropdown">
            <img class="avatar" src="@/assets/images/rainbow.jpg" alt="User Avatar">
            <span class="username">当前用户</span>
            <img class="dropdown-arrow" src="@/assets/svgs/downnarrow.svg" alt="Dropdown Arrow">
            <div v-if="dropdownVisible" class="dropdown-menu">
                <p @click="$router.push('/teacher/information')">个人信息</p>
                <p @click="$router.push('/login')">退出登录</p>
            </div>
        </div>
    </div>
    <div class="siinput">
        <input v-model="duration" type="number" placeholder="输入签到时长（分钟）" class="signininput"/>
        <button @click="startSign" class="signinbutton">发起签到</button>
        <!-- 显示剩余时间，以分钟和秒的形式 -->
        <div v-if="isCounting">剩余时间: {{ remainingMinutes }} 分 {{ remainingSeconds }} 秒</div>
        <!-- <div v-if="signList.length > 0"> -->
        <div v-if="0 > 0">
            <h2>签到历史记录</h2>
            <div v-for="sign in signList" :key="sign.signId">
                <p>第{{ sign.signOrder }}次签到</p>
                <p>签到ID: {{ sign.signId }}</p>
                <p>班级总人数: {{ sign.total }}</p>
                <p>已签到人数: {{ sign.signed }}</p>
                <p>签到率: {{ (sign.signed / sign.total * 100).toFixed(2) }}%</p>
                <p>已签到人名: {{sign.students.filter(s => s.status === 1).map(s => s.username).join(', ')}}</p>
                <p>未签到人数: {{ sign.total2 }}</p>
                <p>未签到人名: {{ sign.unSignedStudents.join(', ') }}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { createSign } from '@/api/sign';
import { ElMessage } from 'element-plus'; // 确保你已经引入了 ElMessage

const dropdownVisible = ref(false);
const toggleDropdown = () => {
    dropdownVisible.value = !dropdownVisible.value;
    console.log('下拉菜单可见性切换:', dropdownVisible.value);
};

// 定义响应式数据
const duration = ref(''); // 输入的签到时长（分钟）
const remainingTime = ref(0); // 剩余时间（秒）
const isCounting = ref(false); // 是否正在倒计时
const remainingMinutes = ref(0); // 剩余分钟数
const remainingSeconds = ref(0); // 剩余秒数
let timer = null; // 定时器
const signList = ref([]); // 签到历史记录

// 更新分和秒显示的方法
const updateRemainingDisplay = () => {
    remainingMinutes.value = Math.floor(remainingTime.value / 60);
    remainingSeconds.value = remainingTime.value % 60;
};

// 发起签到的方法
const startSign = async () => {
    const inputValue = Number(duration.value);
    if (!duration.value || isNaN(inputValue) || !Number.isInteger(inputValue) || inputValue < 1) {
        ElMessage.warning('请输入有效的签到时长（≥1 分钟的整数）');
        return;
    }
    if (duration.value > 1000) {
        ElMessage.warning('请输入有效的签到时长（<1000 分钟的整数）');
        return;
    }
    // 将分钟转换为秒
    remainingTime.value = inputValue * 60;
    isCounting.value = true;
    // 更新初始的分和秒显示
    updateRemainingDisplay();
    // 启动倒计时
    timer = setInterval(() => {
        if (remainingTime.value > 0) {
            remainingTime.value--;
            updateRemainingDisplay();
        } else {
            // 倒计时结束
            clearInterval(timer);
            isCounting.value = false;
        }
    }, 1000);

    try {
        const response = await createSign(inputValue);
        // 假设响应中有签到记录数据，你可以根据实际情况修改
        // if (response.data) {
        //   signList.value.push(response.data);
        // }
    } catch (error) {
        console.error('发起签到失败:', error);
    }

};

</script>

<style scoped>
.assignment-header {
    display: flex;
    height: 7lvh;
    width: 99lvw;
    background-color: #13227A;
    color: white;
}

.back-button {
    background-color: transparent;
    width: 3%;
    color: white;
    cursor: pointer;
}

.information {
    margin-left: 37.5%;
    font-size: 28px;
    line-height: 7lvh;
    font-family: kaiti;
    color: rgb(243, 245, 254);
}

.user-info {
    position: relative;
    align-items: center;
    cursor: pointer;
    display: flex;
    margin-left: 38%;
    z-index: 999;
}

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

.dropdown-arrow {
    width: 16px;
    height: 16px;
    margin-left: 5px;
}

.username {
    font-size: 16px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    color: black;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    z-index: 1000;
}

.dropdown-menu :hover {
    background-color: #f0f0f0;
    color: brown;
}

.siinput{
    width: 98lvw;
    margin-top: 3lvh;
    height: 18lvh;
}

.signininput{
    margin-left: 30%;
    width: 20lvw;
    height: 5lvh;
    color: rgb(28, 28, 28);
}

.signinbutton{
    display: inline-block;
    margin-left: 1lvw;
    width: 7lvw;
    height: 5.7lvh;
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.signinbutton:hover{
    background-color: #0056b3;
}

</style>